<template>
  <div class="devicelist">
    <el-button
      type="primary"
      plain
      @click="add_classification"
    >新增</el-button>
    <el-button
      type="danger"
      plain
      @click="delete_classification"
    >删除</el-button>
    <div
      class="input_box"
      style="margin-bottom: 10px;"
    >
      <el-input
        v-model="input"
        placeholder="请输入内容"
        style="width: 200px"
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
      >搜索</el-button>
    </div>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        label=""
        width="95"
      >
        <template
          slot="header"
          slot-scope="scope"
        >
          <el-checkbox
            v-model="checkedAll"></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="设备编号"
        width="95"
      >
        <template slot-scope="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column>
      <el-table-column
        label="设备名称"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column
        label="设备分类"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.classification
            }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="温度"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.temperature }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="压力"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.pressure }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="水量"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.water_volume
            }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.state }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      layout="prev, pager, next"
      :total="50"
    >
    </el-pagination>
    <!--  新增设备 -->
    <el-dialog
      title="新增分类"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="设备名称">
          <el-input
            v-model="formLabelAlign.classification"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备分类">
          <el-input
            v-model="formLabelAlign.describe"
          ></el-input>
        </el-form-item>
      </el-form>

      <span
        slot="footer"
        class="dialog-footer"
      >

        <el-button
          @click="dialogVisible = false">取
          消</el-button>
        <el-button
          type="primary"
          @click="confirm"
        >确
          定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑设备分类 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="edit_popup"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="equipment"
      >
      <el-form-item label="设备编号">
          <el-input
            v-model="equipment.number"></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="equipment.name"></el-input>
        </el-form-item>
        <el-form-item label="设备分类">
          <el-input
            v-model="equipment.classification"
          ></el-input>
        </el-form-item>
        <el-form-item label="温度">
          <el-input
            v-model="equipment.temperature"
          ></el-input>
        </el-form-item>
        <el-form-item label="压力">
          <el-input
            v-model="equipment.pressure"></el-input>
        </el-form-item>
        <el-form-item label="水量">
          <el-input
            v-model="equipment.water_volume"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input
            v-model="equipment.state"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >

        <el-button @click="edit_popup = false">取
          消</el-button>
        <el-button
          type="primary"
          @click="confirm2"
        >确
          定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { getList } from '@/api/devicelist'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },

  },
  data() {
    return {
      list: null,
      listLoading: true,
      checkedAll: false,
      dialogVisible: false,
      edit_popup: false,
      input: "",
      value: "",
      labelPosition: 'right',
      formLabelAlign: {
        number: "",
        name: '',
        region: '',
        type: '',
        classification: '',
        describe: '',
      },
      equipment: {
        number: "",
        name: "",
        classification: "",
        temperature: "",
        pressure: "",
        water_volume: "",
        state: "",
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    //新增设备分类取消按钮
    delete_classification() {

    },
    add_classification() {
      this.dialogVisible = true
    },
    confirm() {
      if (this.formLabelAlign.classification == '') {
        this.$message({
          message: '设备分类不能为空',
          type: 'warning'
        });
      }
      if (this.formLabelAlign.describe == '') {
        this.$message({
          message: '设备分类描述不能为空',
          type: 'warning'
        });
      }
      if (this.formLabelAlign.classification && this.formLabelAlign.describe != '') {
        this.dialogVisible = false
        this.formLabelAlign.classification = ''
        this.formLabelAlign.describe = ''
      }
    },
    //编辑设备分类
    handleEdit(data) {
      console.log(data);
      this.equipment.number = data.number
      this.equipment.name = data.name
      this.equipment.classification = data.classification
      this.equipment.temperature = data.temperature
      this.equipment.pressure = data.pressure
      this.equipment.water_volume = data.water_volume
      this.equipment.state = data.state
      this.edit_popup = true
    },
    confirm2() {
      if (this.equipment.name == '') {
        this.$message({
          message: '设备名称不能为空',
          type: 'warning'
        });
        return
      }
      if (this.equipment.classification == '') {
        this.$message({
          message: '设备分类不能为空',
          type: 'warning'
        });
        return
      }
      if (this.equipment.temperature == '') {
        this.$message({
          message: '设备温度不能为空',
          type: 'warning'
        });
        return
      }
      if (this.equipment.temperature == '') {
        this.$message({
          message: '设备压力不能为空',
          type: 'warning'
        });
        return
      }
      if (this.equipment.water_volume == '') {
        this.$message({
          message: '设备压力不能为空',
          type: 'warning'
        });
        return
      }
      if (this.equipment.state == '') {
        this.$message({
          message: '设备状态不能为空',
          type: 'warning'
        });
        return
      }
    },
    /* confirm2() {
      this.edit_popup = false
      this.edit.classification = ''
      this.edit.describe = ''
    }, */
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>
<style>
.devicelist {
  padding: 10px;
}

.input_box {
  float: right;
}

.pager {
  float: right;
  margin: 10px 0;
}
</style>
